<div resize-folders="vm.width"></div>
<div ng-if="!vm.state.is('selectFolder')" class="folder recents empty"
     ng-class="{selected: vm.showRecents}"
     ng-click="vm.selectFolder(null)"
     ng-style="{width: vm.width === 0 ? 'auto' : vm.width + 'px'}">
  <div class="folderArrowWrapper">
    <div class="folderArrow"></div>
  </div>
  <div class="folderImage"></div>
  <div class="folderName">
    Recents
  </div>
</div>
<div id="{{folder.path}}"
     class="folder"
     ng-click="vm.selectFolder(folder)"
     ng-dblclick="vm.selectAndOpenFolder(folder)"
     ng-repeat="folder in vm.folders | orderBy: folder : false : vm.compareFolders"
     ng-style="{paddingLeft: folder.indent + 'px', width: vm.width === 0 ? 'auto' : vm.width - folder.indent + 'px'}"
     ng-show="folder.visible"
     ng-class="{selected: folder === vm.selectedFolder,
                empty: folder.hasChildren === false,
                opened: folder.open === true,
                home: folder.path === '/home',
                public: folder.path === '/public'}">
  <div class="folderArrowWrapper" ng-click="vm.openFolder(folder); $event.stopPropagation();">
    <div class="folderArrow"></div>
  </div>
  <div class="folderImage"></div>
  <div class="folderName">
    {{folder.name}}
  </div>
</div>
